<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">

		div{
			background: green;
			width: 350px;
			height: 150px;
			margin:10px;
			float: left;
			color: white;
		}
	</style>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="bootstrap.js"></script>
	<!-- Bootstrap -->
	<link href="bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>

	<div id="div1" class="">1</div>

	<div class="test">2</div>
	<div>3</div>
	<div class="test redbox">4</div>
	<div class="test">5</div>
	
	<script type="text/javascript">
		$('#div1').html("我被修改了").hide(10000).show(1000).html("我又被修改了");
		$('.test').html("按类修改");
		$('.redbox').css({
			background: 'red',
		});
	</script>
	
	<!-- Split button -->
	<div class="btn-group" >
		<button type="button"  class="btn btn-danger">Action</button>

		<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<span class="caret"></span>
			<span class="sr-only">Toggle Dropdown</span>
		</button>
		<ul class="dropdown-menu" >
			<li><a href="#">Action</a></li>
			<li><a href="#">Another action</a></li>
			<li><a href="#">Something else here</a></li>
			<li role="separator" class="divider"></li>
			<li><a href="#">Separated link</a></li>
		</ul>
	</div>
	<div class="alert alert-info">
		<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
		<strong>Title!</strong> Alert body ...
	</div>

</body>
</html>

